目录

大项目之网上书城（十一）——前台完成

主要改动

昨天的问题解决了，用户界面一分为三，原本的用户页面变成了现在的浏览历史界面，并多了一个修改信息界面和收货地址设置界面。同时，购物车和订单的代码完善，之前的bug进行修改。前台显示算是完成了。还差管理员的管理界面，以及填充数据库了。哦，对了，我今天新加了一个表，专门用来存收货地址，和用户表是n对1的。

新增代码

1.head.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"    pageEncoding="utf-8"%><%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
    
    
    
    
    
    
     
         
     
        
      
            
       BookStore            
       
                
                    
       
            
       
                
                    
       
        
      
    
     
    
         
     
        
      
            
       购物车        
      
        
      
            
                       
        我的订单            
                   
                       
        切换用户            
                   
                       
        登录下单            
               
      
        
      
            
                       
        
                  
          ${sessionScope.user.username }                    
         
 
          
浏览历史
 
          
修改信息
 
          
收货地址
 
         
                
        
            
                   
                       
        管理图书            
                   
                       
        我的账户            
               
      
        
      
            
       用户注册        
      
    
     
    

效果图

2.changeinfo.jsp

如果不填原密码的话，就代表不修改密码。

<%@page import="cn.edu.bdu.mc.beans.User"%><%@page import="cn.edu.bdu.mc.utils.CookieUtil"%><%@ page language="java" contentType="text/html; charset=utf-8"    pageEncoding="utf-8"%><%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
        
     
    
    
     
     
    
      
是否要退出？
      是    
      否
     
     
     
      
     
     
     
    
      
        
       
            
        欢迎您，${user.username } 
         
          先生
         
         
          女生
         ！            
        退出登录        
       
    
      
    
      
        
                   
        
                
         
 
           
          
 
            
           邮箱 
            
           
 
             
            
 
             
请输入有效的邮箱地址
 
             
 
             
通过
 
            
 
           
 
          
 
           
          
 
           昵称 
           
 
             
            
 
             
昵称请设置4~20位字符
 
             
 
             
通过
 
            
 
           
 
          
 
          
 
           原密码 
           
 
             
            
 
             
此项为空则不修改密码
 
             
密码错误
 
             
通过
 
            
 
           
 
          
 
          
 
           新密码 
           
 
             
            
 
             
密码请设置4~20位字符
 
             
 
             
通过
 
            
 
           
 
          
 
          
 
           确认密码 
           
 
             
            
 
             
 
             
通过
 
            
 
           
 
          
 
          
 
           性别 
           
 
             男          
             女  
           
 
          
 
          
 
            
           
 
             
           
 
           
 
             
           
 
          
 
         
            
        
        
           
      
     
     
     
      
     
    

效果图

3.shou.jsp

有添加收货地址，设为默认地址的功能。订单时会默认选择默认地址。地址为空时添加会自动设为默认地址，否则是普通地址。

<%@page import="java.util.List"%><%@page import="cn.edu.bdu.mc.daos.impls.ShouhuoDaoImpl"%><%@page import="cn.edu.bdu.mc.daos.ShouhuoDao"%><%@page import="cn.edu.bdu.mc.beans.Shouhuo"%><%@page import="cn.edu.bdu.mc.beans.User"%><%@page import="cn.edu.bdu.mc.utils.CookieUtil"%><%@ page language="java" contentType="text/html; charset=utf-8"    pageEncoding="utf-8"%><%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
        
     
    
    
     
     
    
      
是否要退出？
      是    
      否
     
     
     
      
     
     
     
    
      
        
       
            
        欢迎您，${user.username } 
         
          先生
         
         
          女生
         ！         
                    退出登录        
       
    
      
    <%        User user = (User)session.getAttribute("user");        ShouhuoDao shouhuoDao = new ShouhuoDaoImpl();        Shouhuo shouhuo_default = shouhuoDao.findShouhuoById(user.getUser_id());        List
      
        shouhuoList = shouhuoDao.findAllOtherShouhuoById(user.getUser_id());    %>    
       
        
        
            
         
 
          
默认地址
 
         
            <%                if(shouhuo_default==null){                    out.print("无");                }else{            %>            
         
           
           
             
姓名
             
电话
             
地址
             
             
             
            
            
             
<%=shouhuo_default.getName() %>
             
<%=shouhuo_default.getPhone() %>
             
<%=shouhuo_default.getAddress() %>
             
             
             
            
           
         
            <%} %>            
         
 
          
其他地址
 
         
            <%                if(shouhuoList.isEmpty()){                    out.print("无");                }else{            %>            
         
 <% for(Shouhuo shouhuo:shouhuoList){ %> 
 <%} %> 
           
           
             
姓名
             
电话
             
地址
             
操作
             
            
           
             
<%=shouhuo.getName() %>
             
<%=shouhuo.getPhone() %>
             
<%=shouhuo.getAddress() %>
             
设为默认
             
            
          
         
            <%} %>            
         
 
          添加地址 
         
        
        
    
       
      
     
     
     
      
     
    

效果图

4.changeinfo.js

function checkEmail() {         // 验证邮箱    var regex = /^[\w-]+@([\w-]+\.)+[a-zA-Z]{2,4}$/;    var value =$("#email").val();    var msg = "";    if (!value)        msg = "邮箱必须填写：";    else if (!regex.test(value))        msg = "邮箱格式不合法：";    $("#emailMsg").html(msg);    $("#emailMsg").css("display","block");    $("#text1").css("display","none");    $("#emailS").css("display","none");    if(msg==""){        $("#emailMsg").css("display","none");        $("#text1").css("display","none");        $("#emailS").css("display","block");            }    return msg == "";}function checkUsername() {      // 验证用户名    var regex = /^[a-zA-Z_]\w{3,20}$/;  // 字母数字下划线1到10位, 不能是数字开头    var value = $("#username").val();// 获取usernameObj中的文本    var msg = "";                       // 最后的提示消息, 默认为空    if (!value)                         // 如果用户名没填, 填了就是一个字符串可以当作true, 没填的话不论null或者""都是false        msg = "用户名必须填写：";           // 改变提示消息    else if (!regex.test(value))        // 如果用户名不能匹配正则表达式规则        msg = "用户名不合法：";            // 改变提示消息    $("#usernameMsg").html(msg);        // 将提示消息放入SPAN    $("#usernameMsg").css("display","block");//让文字显示出来。    $("#text2").css("display","none");    $("#usernameS").css("display","none");    if(msg==""){        $("#usernameMsg").css("display","none");        $("#text2").css("display","none");        $("#usernameS").css("display","block");         }    return msg == "";                   // 如果提示消息为空则代表没出错, 返回true}function checkYuan(){    var value = $("#yuan").val();    $.post("/bookstore/MiMa",function(data){        if(data==value){            $("#yuanMsg").css("display","none");            $("#text4").css("display","none");            $("#yuanS").css("display","block");         }else{            $("#yuanMsg").css("display","block");            $("#text4").css("display","none");            $("#yuanS").css("display","none");        }    });}function checkPassword() {      // 验证密码    var regex = /^.{4,20}$/;            // 任意字符, 6到16位    var value =$("#password").val();    var msg = "";    if (!value)        msg = "密码必须填写：";    else if (!regex.test(value))        msg = "密码不合法：";    $("#passwordMsg").html(msg);    $("#passwordMsg").css("display","block");//让文字显示出来。    $("#text3").css("display","none");    $("#passwordS").css("display","none");    if(msg==""){        $("#passwordMsg").css("display","none");        $("#text3").css("display","none");        $("#passwordS").css("display","block");         }    return msg == "";}function checkConfirm() {       // 验证确认密码    var passwordValue = $("#password").val();    var confirmValue = $("#repassword").val();    var msg = "";    if(!confirmValue){        msg = "确认密码必须填写";    }    else    if (passwordValue != confirmValue){        msg = "密码必须保持一致";    }    $("#confirmMsg").html(msg);    $("#confirmMsg").css("display","block");//让文字显示出来。    $("#confirmS").css("display","none");    if(msg==""){        $("#confirmMsg").css("display","none");        $("#confirmS").css("display","block");          }    return msg == "";}$(function(){    var code;    $.post("../CheckCode",function(data){        code=data;    });    $("#re").click(function(){        $("#text1").css("display","block");        $("#text2").css("display","block");        $("#text3").css("display","block");        $("#text4").css("display","block");        $("#emailMsg").css("display","none");        $("#usernameMsg").css("display","none");        $("#passwordMsg").css("display","none");        $("#confirmMsg").css("display","none");        $("#yuanMsg").css("display","none");        $("#emailS").css("display","none");        $("#usernameS").css("display","none");        $("#passwordS").css("display","none");        $("#confirmS").css("display","none");        $("#yuanS").css("display","none");    });    $("#email").keyup(function(){        checkEmail();    });    $("#yuan").keyup(function(){        checkYuan();    });    $("#username").keyup(function(){        checkUsername();    });    $("#password").keyup(function(){        checkPassword();    });    $("#repassword").keyup(function(){        checkConfirm();    });    $("form").submit(function(){        if($("#yuan").val()==null||$("#yuan").val()==''){            return checkEmail()&&checkUsername();        }else{            return checkEmail()&&checkUsername()&&checkPassword()&&checkConfirm()&&checkYuan();        }    });});

5.ChangeInfoServlet

package cn.edu.bdu.mc.servlets;import java.io.IOException;import java.sql.SQLException;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.Cookie;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import javax.servlet.http.HttpSession;import cn.edu.bdu.mc.beans.User;import cn.edu.bdu.mc.daos.UserDao;import cn.edu.bdu.mc.daos.impls.UserDaoImpl;import cn.edu.bdu.mc.utils.CookieUtil;/** * Servlet implementation class ChangeInfoServlet */@WebServlet("/ChangeInfo")public class ChangeInfoServlet extends HttpServlet {    private static final long serialVersionUID = 1L;           /**     * @see HttpServlet#HttpServlet()     */    public ChangeInfoServlet() {        super();        // TODO Auto-generated constructor stub    }    /**     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)     */    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {                try {            HttpSession session = request.getSession();            User user = (User) session.getAttribute("user");            String username = request.getParameter("username");            String email = request.getParameter("email");            String password = request.getParameter("password");            if(password==""||password==null) {                password = user.getPassword();            }            user.setUsername(username);            user.setPassword(password);            user.setEmail(email);            UserDao userDao = new UserDaoImpl();            userDao.update(user);            Cookie[] cookies = request.getCookies();            Cookie cookie = CookieUtil.findCookieByName(cookies, "user");            cookie.setValue(username+"#"+password);            response.sendRedirect(request.getContextPath()+"/client/user.jsp");        } catch (SQLException e) {            // TODO Auto-generated catch block            e.printStackTrace();        }    }    /**     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)     */    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {        // TODO Auto-generated method stub        doGet(request, response);    }}

6.ShouhuoServlet

package cn.edu.bdu.mc.servlets;import java.io.IOException;import java.sql.SQLException;import java.util.HashMap;import java.util.Map;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import cn.edu.bdu.mc.beans.Shouhuo;import cn.edu.bdu.mc.beans.User;import cn.edu.bdu.mc.daos.impls.ShouhuoDaoImpl;import cn.edu.bdu.mc.services.impls.ShouhuoServiceImpl;/** * Servlet implementation class ShouHuoServlet */@WebServlet("/ShouHuo")public class ShouHuoServlet extends HttpServlet {    private static final long serialVersionUID = 1L;           /**     * @see HttpServlet#HttpServlet()     */    public ShouHuoServlet() {        super();        // TODO Auto-generated constructor stub    }    /**     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)     */    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {                String name = request.getParameter("name");        String phone = request.getParameter("phone");        String address = request.getParameter("address");        Shouhuo shouhuo = new Shouhuo();        User user = (User)request.getSession().getAttribute("user");        shouhuo.setUser_id(user.getUser_id());        shouhuo.setName(name);        shouhuo.setPhone(phone);        shouhuo.setAddress(address);        try {            new ShouhuoServiceImpl().addNewShouhuo(shouhuo);        } catch (SQLException e) {            // TODO Auto-generated catch block            e.printStackTrace();        }        response.sendRedirect(request.getContextPath()+"/client/index.jsp");    }    /**     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)     */    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {        // TODO Auto-generated method stub        doGet(request, response);    }}

7.ShouhuoChangeServlet

package cn.edu.bdu.mc.servlets;import java.io.IOException;import java.sql.SQLException;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import cn.edu.bdu.mc.beans.Shouhuo;import cn.edu.bdu.mc.daos.impls.ShouhuoDaoImpl;import cn.edu.bdu.mc.services.ShouhuoService;import cn.edu.bdu.mc.services.impls.ShouhuoServiceImpl;/** * Servlet implementation class ShouhuoChangeServlet */@WebServlet("/ShouhuoChange")public class ShouhuoChangeServlet extends HttpServlet {    private static final long serialVersionUID = 1L;           /**     * @see HttpServlet#HttpServlet()     */    public ShouhuoChangeServlet() {        super();        // TODO Auto-generated constructor stub    }    /**     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)     */    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {                try {            String shouhuo_id = request.getParameter("shouhuo_id");            Shouhuo shouhuo = new ShouhuoDaoImpl().findById(Integer.parseInt(shouhuo_id));            ShouhuoService shouhuoService = new ShouhuoServiceImpl();            shouhuoService.changeDefault(shouhuo);            response.sendRedirect(request.getContextPath()+"/client/shou.jsp");        } catch (NumberFormatException | SQLException e) {            // TODO Auto-generated catch block            e.printStackTrace();        }            }    /**     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)     */    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {        // TODO Auto-generated method stub        doGet(request, response);    }}

8.order.jsp

<%@page import="cn.edu.bdu.mc.beans.User"%><%@page import="cn.edu.bdu.mc.services.impls.OrderServiceImpl"%><%@page import="cn.edu.bdu.mc.services.OrderService"%><%@page import="cn.edu.bdu.mc.beans.Order"%><%@page import="java.util.List"%><%@ page language="java" contentType="text/html; charset=utf-8"    pageEncoding="utf-8"%><%    User user = (User)request.getSession().getAttribute("user");    if(user==null){        response.sendRedirect(request.getContextPath()+"/client/login.jsp");    }else{    OrderService orderService = new OrderServiceImpl();    List
    
     notPay = orderService.findNotPayByUser_id(user.getUser_id());    List
     
      areadyPay = orderService.findAreadyPayByUser_id(user.getUser_id());    %>
      
      
       
      
      
      
            
       
              
        
                
         
未付款：
              
        
    <% if(notPay.isEmpty()){ %>        无    <% }else{ %>              
        
 <% for(Order order : notPay){%> 
 <% } %> <% } %> 
                         
          
            
            
姓名
            
电话
            
地址
            
总价
            
创建时间
            
操作
           
          
            
查看详情
            
<%=order.getReciver_name() %>
            
<%=order.getReciver_phone() %>
            
<%=order.getReciver_address() %>
            
<%=order.getMoney() %>
            
<%=order.getOrder_time() %>
            
 付款| 删除 
           
         
        
              
        
                
         
已付款：
              
        
    <% if(areadyPay.isEmpty()){ %>        无
        
    <% }else{ %>              
        
 <% for(Order order : areadyPay){%> 
 <% } %> <% } %> 
                         
          
            
            
姓名
            
电话
            
地址
            
总价
            
创建时间
           
          
            
查看详情
            
<%=order.getReciver_name() %>
            
<%=order.getReciver_phone() %>
            
<%=order.getReciver_address() %>
            
<%=order.getMoney() %>
            
<%=order.getOrder_time() %>
           
         
        
            
       
      
      
      
       
      
<%} %>
     
    

9.orderitem.jsp

<%@page import="cn.edu.bdu.mc.beans.Book"%><%@page import="cn.edu.bdu.mc.daos.BookDao"%><%@page import="cn.edu.bdu.mc.daos.impls.BookDaoImpl"%><%@page import="org.apache.jasper.tagplugins.jstl.core.ForEach"%><%@page import="cn.edu.bdu.mc.daos.impls.OrderitemDaoImpl"%><%@page import="cn.edu.bdu.mc.daos.OrderitemDao"%><%@page import="cn.edu.bdu.mc.beans.Orderitem"%><%@page import="java.util.List"%><%@ page language="java" contentType="text/html; charset=utf-8"    pageEncoding="utf-8"%>
    
    
     
    
    
    
     <%    String order_id = request.getParameter("order_id");    OrderitemDao orderitemDao = new OrderitemDaoImpl();    BookDao bookDao = new BookDaoImpl();    List
     
       items = orderitemDao.findItemById(order_id);    %>    
      
        
       
            
        
订单详情
        
       
        
       
        <%        for(Orderitem orderitem:items){            Book book = bookDao.findBookById(orderitem.getBook_id());        %>            
            <%        };        %>        
                    
         
           
书名
           
价格
           
类别
           
描述
          
         
           
<%=book.getBook_name() %>
           
<%=book.getPrice() %> 元
           
<%=book.getClazz() %>
           
<%=book.getDescribtion() %>
          
        
       
    
      
     
    
    
    
     
    

10.cart.jsp

<%@page import="java.util.List"%><%@page import="cn.edu.bdu.mc.beans.Book"%><%@ page language="java" contentType="text/html; charset=utf-8"    pageEncoding="utf-8"%>
    
    
     
    
    
    
         <% List
     
      cart = (List
      
       )request.getSession().getAttribute("cart");    if(cart==null){             out.print("这里竟然是空的");    }else{        %>        
       
                <%        int i=1;        for(Book book:cart){            if(i>15){break;}%>                
        
              
         
 
          
<%=book.getBook_name() %>
 
         
              
         
           
           
             
价格
             
类别
             
数量
             
点击量
             
购买量
             
热度
             
描述
             
选中
            
            
             
<%=book.getPrice() %> 元
             
<%=book.getClazz() %>
             
<%=book.getCount() %>
             
<%=book.getClick_num() %>
             
<%=book.getBuy_num() %>
             
<%=book.getRe_du() %>
             
<%=book.getDescribtion() %>
             
            
           
         
            
        
            <%        };        %>        
                
       
        <%    }%>
      
     
    
    
    
     
    

11.NewOrderServlet中购物车的修改

HttpSession session = request.getSession();        List
    
     cart = (List
     
      ) session.getAttribute("cart");        if(cart!=null) {            List
      
       need_del = new ArrayList
       
        ();            BookDao bookDao = new BookDaoImpl();            for(String book_id:book_ids) {                for (Book book : cart) {                    if(book.getBook_id()==Integer.parseInt(book_id)) {                        need_del.add(book);                    }                }            }            for (Book book : need_del) {                cart.remove(book);            }        session.setAttribute("cart", cart);
       
      
     
    

购物车加订单效果展示